Data Labelling Options

In Silverlight Elements, you can label data items on your chart to help your users understand the data or provide more detail than they can obtain by eye.

For information about labels on the chart axes, see Axis Display Options.

Data label options vary depending on the type of data series. For example, BubbleSeries does not support data labels at all, and BarSeries does not support data label lines.

Showing Data Labels

In order to keep charts clean and unclutters, Silverlight Elements does not show data labels by default. To show data labels for a data series, set the ShowDataLabels property:

CopyLabelling points in a LineSeries

<ms:LineSeries ItemsSource="{Binding}" 
               XBinding="{Binding Quarter}" 
               YBinding="{Binding Amount}" 
               ShowDataLabels="True" 
               />

To draw a line from each label to the data point it identifies, set the ShowDataLabelLines property.

Customizing Data Label Appearance

Data labels are drawn by default as solid rectangles. They respect the SeriesBrush (and, for bar series, the Brushes collection).

To customize the appearance of data labels, use the DataLabelStyle property. The target type of the style should be DataLabel.

To change the appearance of the text, style properties such as Foreground, FontFamily and FontSize:

CopyCustomizing text properties of a data label

<ms:BarSeries SeriesBrush="Azure">
  <ms:BarSeries.DataLabelStyle>
    <Style TargetType="ms:DataLabel">
      <Setter Property="Foreground" Value="Black" />
      <Setter Property="FontStyle" Value="Italic" />
    </Style>
  </ms:BarSeries.DataLabelStyle>
</ms:BarSeries>

For more advanced customization, style the control Template property. To obtain the value being plotted, bind to the DataLabel.DependentData property.

CopyA custom label design

<ms:LineSeries>
  <ms:LineSeries.DataLabelStyle>
    <Style TargetType="ms:DataLabel">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="ms:DataLabel">
            <Grid>
              <Path Data="M 10,0 L 40,0 A 10,10 180 1 1 40,20 L 10,20 A 10,10 180 1 1 10,0" 
                    Fill="AliceBlue" Stroke="CadetBlue" />
              <TextBlock Text="{Binding DependentData, RelativeSource={RelativeSource TemplatedParent}}" 
                         TextAlignment="Center" VerticalAlignment="Center" 
                         Foreground="Black" 
                         />
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </ms:LineSeries.DataLabelStyle>
</ms:LineSeries>

If all you need to do is change the text color of the data label, style the Foreground property.